import { Card, Button, Select, Input, Space } from "antd";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { getExportAsync, changeParams } from "@/store/userExport/userExportSlice";
import { isEqual } from "lodash-es";

export default function Filter() {
  const dispatch = useAppDispatch();
  const { params, table } = useAppSelector((state) => state.userExport);
  const { config: { data: { data: { user_export_conf = [] } = {} } = {} } = {} } = useAppSelector(state => state.app)

  return (
    <Card>
      <Space
        wrap
        size="large"
        className="w-full flex justify-between"
        classNames={{ item: "last:ml-auto" }}
      >
        <label>
          <span>用户ID：</span>
          <Input value={params.query_user_id} onChange={e => dispatch(changeParams({ query_user_id: e.target.value }))} className="max-w-[120px]" />
        </label>
        <label>
          <span>下载类型：</span>
          <Select
            className="min-w-[120px]"
            options={user_export_conf}
            value={params.download_type}
            onChange={download_type => dispatch(changeParams({ download_type }))}
          />
        </label>
        <label>
          <span>是否重新统计：</span>
          <Select
            className="min-w-[120px]"
            onChange={re_statistic => dispatch(changeParams({ re_statistic }))}
            value={params.re_statistic}
            options={[
              { label: '是', value: 1 },
              { label: '否', value: 0 }
            ]}
          />
        </label>

        <Button
          loading={table.status === "loading"}
          type="primary"
          onClick={(): void => {
            if (isEqual(params, table?.params)) {
              dispatch(getExportAsync({ ...params }));
            } else {
              const newParams = {
                ...params,
              };
              dispatch(changeParams(newParams));
              dispatch(getExportAsync(newParams));
            }
          }}
        >
          查询
        </Button>
      </Space>
    </Card>
  );
}
